<template>
  <div>
    <!-- 英雄区 -->
    <section class="wave-bg py-16 md:py-24">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center">
          <!-- 个人简介区 -->
          <div class="md:w-1/3 mb-8 md:mb-0 text-center md:text-left">
            <div
              class="w-48 h-48 mx-auto md:mx-0 mb-6 rounded-full overflow-hidden border-4 border-primary shadow-lg animate-float"
            >
              <img
                src="@/assets/head.jpg"
                alt="个人头像"
                class="w-full h-full object-cover"
              />
            </div>
            <div class="flex justify-center md:justify-start space-x-4 mt-4">
              <a
                v-for="social in socialLinks"
                :key="social.name"
                :href="social.url"
                target="_blank"
                rel="noopener noreferrer"
                class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-code-accent transition-colors duration-300"
                :aria-label="social.name"
                v-tooltip="'访问 ' + social.name"
              >
                <i :class="social.icon" class="text-xl"></i>
              </a>
            </div>
          </div>

          <!-- 英雄区内容 -->
          <div class="md:w-2/3 md:pl-12">
            <h1
              class="text-4xl md:text-5xl font-bold mb-4 text-gray-800 dark:text-white"
            >
              <span class="text-primary dark:text-code-accent">{{
                Array.isArray(title) ? title[0] : ""
              }}</span
              >{{ Array.isArray(title) ? title[1] : title }}
            </h1>
            <div class="h-12 mb-6">
              <TypeWriter
                :texts="typewriterTexts"
                :delay="100"
                class="text-xl md:text-2xl text-gray-600 dark:text-gray-300"
              />
            </div>
            <p class="text-gray-600 dark:text-gray-400 mb-8 text-lg">
              {{ minTitle }}
            </p>
            <div
              class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"
            >
              <router-link to="/blog" class="btn-primary text-center">
                阅读博客
              </router-link>
              <router-link to="/projects" class="btn-outline text-center">
                查看项目
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 精选项目展示 -->
    <section class="py-16 bg-white dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">精选项目</h2>
          <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            这些是我最近完成的一些项目，展示了我的技术栈和解决问题的能力。
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <ProjectCard
            v-for="project in featuredProjects"
            :key="project.id"
            :project="project"
          />
        </div>

        <div class="text-center mt-12">
          <router-link to="/projects" class="btn-primary">
            查看全部项目
          </router-link>
        </div>
      </div>
    </section>

    <!-- 最新文章 -->
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">最新文章</h2>
          <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            分享我的技术见解、学习心得和项目开发过程中的经验教训。
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <BlogPostCard
            v-for="post in latestPosts"
            :key="post.id"
            :post="post"
          />
        </div>

        <div class="text-center mt-12">
          <router-link to="/blog" class="btn-primary">
            浏览全部文章
          </router-link>
        </div>
      </div>
    </section>

    <!-- 技术栈云 -->
    <section class="py-16 bg-white dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4">我的技术栈</h2>
          <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            这些是我目前掌握和正在学习的技术栈。
          </p>
        </div>

        <div class="flex flex-wrap justify-center gap-4">
          <div
            v-for="tech in techStack"
            :key="tech.name"
            class="tech-badge text-xs md:text-base py-2 px-4"
            :style="{ fontSize: `calc(0.85rem + ${tech.level * 0.008}rem)` }"
            v-tooltip="`${tech.name} - 掌握度 ${tech.level}%`"
          >
            {{ tech.name }}
          </div>
        </div>

        <div class="text-center mt-12">
          <router-link to="/tech-stack" class="btn-primary">
            查看详细技术栈
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { computed, reactive, ref, watch } from "vue";
import TypeWriter from "../components/TypeWriter.vue";
import ProjectCard from "../components/ProjectCard.vue";
import BlogPostCard from "../components/BlogPostCard.vue";
import {
  getTypewriterTexts,
  getConfig,
  getProjects,
  getTechStack,
  getBlogs,
} from "../api/index";

export default {
  name: "HomeView",
  components: {
    TypeWriter,
    ProjectCard,
    BlogPostCard,
  },
  setup() {
    const title = ref("SyntaxSeed");
    var config = ref({});

    const titles = title;
    const socialLinks = ref([]);
    watch(config, (newConfig) => {
      if (newConfig && newConfig.title) {
        title.value = newConfig.title;
      }
      if (newConfig && newConfig.link) {
        newConfig.links = JSON.parse(newConfig.link);
        console.log("获取链接配置:", newConfig.links);
        socialLinks.value = newConfig.links.map((item) => {
          return {
            name: item.key.split("^")[0],
            icon: item.key.split("^")[1],
            url: item.value,
          };
        });
      }
      if (
        title.value.split("^").length == 2 &&
        title.value.split("^")[1].length > 0
      ) {
        titles.value = title.value.split("^");
      }
    });
    try {
      getConfig().then((res) => {
        console.log("获取配置成功:", res);
        config.value = res;
      });
    } catch (e) {
      var config = null;
      console.error("获取配置失败:", e);
    }
    const typewriterTexts = ref([
      "欢迎来到我的个人网站！",
      "记录我的编程之旅",
      "分享技术心得和项目经验",
      "追踪成长轨迹",
    ]);
    getTypewriterTexts()
      .then((res) => {
        console.log("获取打字机文本成功:", res.data);
        typewriterTexts.value = res.data;
      })
      .catch((err) => {
        console.error("获取打字机文本失败:", err);
      });

    const featuredProjects = ref([]);
    getProjects({ limit: 3 })
      .then((res) => {
        console.log("获取精选项目成功:", res.data);
        featuredProjects.value = res.data;
      })
      .catch((err) => {
        console.error("获取精选项目失败:", err);
      });

    const latestPosts = ref([]);
    getBlogs({ page: 1, limit: 4 })
      .then((res) => {
        console.log("获取最新文章成功:", res.data);
        latestPosts.value = res.data;
      })
      .catch((err) => {
        console.error("获取最新文章失败:", err);
        // 加载失败时使用默认数据
        latestPosts.value = [
          {
            id: 1,
            title: "Vue3组合式API的实践心得",
            excerpt:
              "分享我在使用Vue3组合式API过程中的经验和最佳实践，以及与Options API的对比。",
            date: "2023-10-15",
            image: "https://via.placeholder.com/800x450",
            tags: ["Vue3", "前端开发"],
            readTime: 8,
          },
          {
            id: 2,
            title: "从零开始学习Node.js后端开发",
            excerpt:
              "记录我学习Node.js的过程，包括Express框架、MongoDB数据库和RESTful API的设计与实现。",
            date: "2023-10-01",
            image: "https://via.placeholder.com/800x450",
            tags: ["Node.js", "后端开发"],
            readTime: 12,
          },
        ];
      });

    const techStack = ref();
    getTechStack()
      .then((res) => {
        console.log("获取技术栈成功:", res);
        techStack.value = res;
      })
      .catch((err) => {
        console.error("获取技术栈失败:", err);
      });
    return {
      typewriterTexts,
      socialLinks,
      featuredProjects,
      latestPosts,
      techStack,
      minTitle: computed(() => {
        return (
          config.value?.minTitle ||
          "记录我的编程之旅，分享技术心得，展示项目作品，追踪成长轨迹。"
        );
      }),
      title: titles,
    };
  },
};
</script>

<style scoped>
@media (max-width: 640px) {
  .tech-badge {
    font-size: 0.95rem !important;
  }
}
</style>
